<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入标题顶部logo图片 -->
    <link rel="icon" href="../imges/logo.jpg" type="image/x-icon">
    <title>京东(JD.COM)-正品低价、品质保证</title>
    <!-- 引入购物车页的css样式 -->
    <link rel="stylesheet" href="../css/shopping.css">
    <!-- 引入jQuery插件 -->
    <script src="../js/jquery-3.6.0.js"></script>
    <!-- 引入购物车的js样式 -->
    <script src="../js/shopping.js"></script>
</head>

<body>
    <!-- 顶部栏 -->
    <div class="shoppingtop">
        <div class="leftbox">
            <img src="../imges/logo.jpg" alt="" id="portrait">
            <span id="topword">执念</span>
            <img src="../imges3/lo.png" alt="" id="jdplus">
        </div>
        <ul class="listldie">
            <li id="toplist"><a href="javascript:;" id="ministry1"> 我的订单</a></li>
            <li id="toplist"><i>|</i><a href="javascript:;" id="ministry"> 我的京东</a></li>
            <li id="toplist"><i>|</i><a href="javascript:;" id="ministry"> 京东会员</a></li>
            <li id="toplist"><i>|</i><a href="javascript:;" id="ministry"> 企业采购</a></li>
            <li id="toplist"><i>|</i><a href="javascript:;" id="ministry"> 客户服务</a></li>
            <li id="toplist"><i>|</i><a href="javascript:;" id="ministry"> 网站导航</a></li>
            <li id="toplist"><i>|</i><a href="javascript:;" id="ministry"> 手机京东</a></li>
            <li id="toplist"><i>|</i><a href="javascript:;" id="ministry"> 网站障碍</a></li>
        </ul>
    </div>
    <!-- 导航标志栏 -->
    <div class="logobar">
        <img src="../imges3/logo-201305-b.png" alt="" id="leftimglogo">
        <div class="allgoods">全部商品</div>
        <div class="rightall">
            <input type="text" name="" id="topinput"><button id="search">搜索</button>
            <div class="distribution">
                <p id="distword">配送至:</p>
                <select id="distriaddress">
                <option>北京市昌平区沙阳镇沙阳路18号</option>
                <option>上海市静安区宏信镇四川中路1号</option>
                <option>广州市黄浦区凌鑫村建安路35号</option>
                <option>深圳市滨海区萨达镇北京路45号</option>
                <option>成都市龙柑区成华大道二仙桥3号</option>
               </select>
            </div>
        </div>
    </div>
    <!-- 商品属性栏- -->
    <div class="attribute">
        <form action="" id="topchek">
            <input type="checkbox" name="all" id="" class="coll">
            <p id="woceek">全选</p>
        </form>
        <div class="bute1">商品</div>
        <div class="bute2">单价</div>
        <div class="bute3">数量</div>
        <div class="bute4">小计</div>
        <div class="bute5">操作</div>
    </div>
    <!-- 商品栏 -->
    <div class="goods">
    </div>
</body>
<script>
    // 调用函数 动态渲染生成页面
    setPage();

    // 给整个父级添加 点击事件 通过事件委托 完成点击效果 
    $('.goods').click(function(e) {
        // 获取 localStorage 中的数据
        const arr = JSON.parse(localStorage.cart);

        // 点击的是全选input
        if (e.target.getAttribute('name') === 'all') {
            arr.forEach(item => {
                item.buy = e.target.checked;
            })

            // 点击的是其他input
        } else if (e.target.getAttribute('name') === 'other') {
            // 循环遍历数组
            for (let i = 0; i <= arr.length - 1; i++) {
                // i 是 索引下标 arr[i] 是 数据对象 也就是 存储的商品
                // e.target 是 点击的标签 也就是 点击的商品
                // 如果 存储的商品goods_id 和 点击的商品goods_id 相同
                if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
                    // 赋值 存储商品 购买状态 是 点击input标签的checked属性值
                    arr[i].buy = e.target.checked;
                    // 终止循环
                    break;
                }
            }

            // 点击的是 - 按钮
        } else if (e.target.getAttribute('name') === '-') {
            // 循环遍历数组
            for (let i = 0; i <= arr.length - 1; i++) {
                // i 是 索引下标 arr[i] 是 数据对象 也就是 存储的商品
                // e.target 是 点击的标签 也就是 点击的商品
                // 如果 存储的商品goods_id 和 点击的商品goods_id 相同
                if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
                    // 购买商品数量 累减1
                    arr[i].num--;

                    // 终止循环
                    break;
                }
            }

            // 点击的是 + 按钮
        } else if (e.target.getAttribute('name') === '+') {
            // 循环遍历数组
            for (let i = 0; i <= arr.length - 1; i++) {
                // i 是 索引下标 arr[i] 是 数据对象 也就是 存储的商品
                // e.target 是 点击的标签 也就是 点击的商品
                // 如果 存储的商品goods_id 和 点击的商品goods_id 相同
                if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
                    // 购买商品数量 累加1
                    arr[i].num++;

                    // 终止循环
                    break;
                }
            }

            // 点击的是 删除 按钮
        } else if (e.target.getAttribute('name') === 'del') {
            // 循环遍历数组
            for (let i = 0; i <= arr.length - 1; i++) {
                // i 是 索引下标 arr[i] 是 数据对象 也就是 存储的商品
                // e.target 是 点击的标签 也就是 点击的商品
                // 如果 存储的商品goods_id 和 点击的商品goods_id 相同
                if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
                    // 从当前索引下标开始删除 删除 1个单元
                    arr.splice(i, 1);

                    // 终止循环
                    break;
                }
            }

        }


        // 将新的数组 存储到 localStorage 中
        localStorage.cart = JSON.stringify(arr);

        // 调用函数 再次动态渲染生成页面
        setPage()
    })


    // 定义函数 根据 本地 localStorage 数据 动态渲染生成页面
    function setPage() {
        // 没有创建购物车
        if (localStorage.cart === undefined) {
            $('.goods').html('');

            // 已经创建购物车
        } else {
            // 将 存储的 json字符串 还原
            const arr = JSON.parse(localStorage.cart);

            // 如果是 空车
            if (arr.length === 0) {
                $('.goods').html('');

                // 不是空车 动态渲染生成页面
            } else {
                // 定义变量 存储结果
                let bool = true;
                let type = 0;
                let number = 0;
                let money = 0;


                // 第一部分 li标签之前的
                let str = `
      
      `;

                // 第二部分 li标签 根据数组 循环遍历生成 

                arr.forEach(item => {
                    // 如果有 商品 购买状态是 购买状态 
                    if (item.buy) {
                        // 计算 购买商品 种类 数量 价格
                        // 购买种类 +1 
                        type++;
                        // 购买数量 累加 当期商品购买数量
                        number += item.num;
                        // 总价格 累加 当前商量价格 * 当前购买数量
                        money += item.goods_price * item.num;


                        // 如果有 商品 购买状态是 不购买状态
                    } else {
                        // 变量赋值false
                        bool = false;
                    }

                    str += `
        <div class="commodity">
                <input type="checkbox" ${ item.buy ? 'checked' : '' } name="other" goods_id="${item.goods_id}" id="" class="chek">
                <a href="" id="jdfigure"><img src="${item.goods_small_logo}" alt="" id="picture"></a>
                <a href="" id="description">${item.goods_name}</a>
                <p class="unitprice">￥${item.goods_price}</p>
                <div class="quantity-form">
                    <button class="decrement"name="-"${ item.num === 1 ? 'disabled' : '' } goods_id="${item.goods_id}">-</button>
                    <input type="button" class="itxt" value="${item.num}">
                    <button class="increment"name="+" goods_id="${item.goods_id}"${ item.num === item.goods_number-0 ? 'disabled' : '' }>+</button>
                </div>
                <p class="subtotal">${item.goods_price}</p>
                <a href="javascript:;"name = "del" goods_id="${item.goods_id}" id="operation">删除</a>
            </div>
        `;

                });


                // 第三部分 li标签之后的
                str += `
        <div class="xiaqu" style="color="red";>
              <h1 name="type"></h1>
              <h1 name="number"></h1>
              <h1 name="money"></h1>
          </div>
          <div class="shoppingfot">
          <input type="checkbox" name="all" id="" class="coll"><span id="cheword">全选</span>
          <a href="javascript:;" class="remove-batch">删除选中的商品</a>
          <a href="javascript:;" class="clear-all">清理购物车</a>
          <p id="ment">
        购物车共有<span class='amount'>${number}</span>件商品  总价<span class="price" >${money.toFixed(2) }</span>
        </p>
    <div class="settlement">去结算</div>
   </div>
      `;

                // 将 字符串内容写入标签
                $('.goods').html(str);

                // 设定全选input标签属性
                $('[name="all"]').prop('checked', bool);

                // 如果 结算内容在 页面的起始部分 
                // 指向 设定标签内容
                $('[name="type"]').html(`您购买了 ${type} 种商品`);
                $('[name="number"]').html(`您购买了 ${number} 件商品`);
                $('[name="money"]').html(`您需要一共支付 ${money.toFixed(2) } 元`);
            }
        }
    }
</script>


<script>
</script>

</html>